<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投资问卷与建议系统</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100 font-sans">
    <div class="container mx-auto p-8">
        <h1 class="text-3xl font-bold text-center mb-8">投资问卷</h1>
        <form id="questionnaireForm" class="bg-white p-8 rounded shadow-md">
            <div class="mb-6">
                <p class="text-lg font-semibold">您的风险偏好是？</p>
                <label class="block mb-2">
                    <input type="radio" name="riskPreference" value="保守型" required class="mr-2"> 保守型
                </label>
                <label class="block mb-2">
                    <input type="radio" name="riskPreference" value="稳健型" required class="mr-2"> 稳健型
                </label>
                <label class="block">
                    <input type="radio" name="riskPreference" value="激进型" required class="mr-2"> 激进型
                </label>
            </div>
            <div class="mb-6">
                <p class="text-lg font-semibold">您的投资期限是？</p>
                <label class="block mb-2">
                    <input type="radio" name="investmentPeriod" value="短期（1年以内）" required class="mr-2"> 短期（1年以内）
                </label>
                <label class="block mb-2">
                    <input type="radio" name="investmentPeriod" value="中期（1 - 3年）" required class="mr-2"> 中期（1 - 3年）
                </label>
                <label class="block">
                    <input type="radio" name="investmentPeriod" value="长期（3年以上）" required class="mr-2"> 长期（3年以上）
                </label>
            </div>
            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">提交</button>
        </form>
        <div id="adviceResult" class="mt-8 bg-white p-8 rounded shadow-md hidden">
            <h2 class="text-2xl font-bold mb-4">您的投资建议是：</h2>
            <p id="adviceText"></p>
        </div>
    </div>
    <script>
        const form = document.getElementById('questionnaireForm');
        const adviceResult = document.getElementById('adviceResult');
        const adviceText = document.getElementById('adviceText');

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const riskPreference = document.querySelector('input[name="riskPreference"]:checked').value;
            const investmentPeriod = document.querySelector('input[name="investmentPeriod"]:checked').value;

            let advice;
            if (riskPreference === "保守型" && investmentPeriod === "短期（1年以内）") {
                advice = "建议投资货币基金或短期债券。";
            } else if (riskPreference === "稳健型" && investmentPeriod === "中期（1 - 3年）") {
                advice = "可以考虑配置一部分债券基金和一部分混合基金。";
            } else if (riskPreference === "激进型" && investmentPeriod === "长期（3年以上）") {
                advice = "建议投资股票或股票型基金。";
            } else {
                advice = "暂时无法给出具体建议，请补充更多信息。";
            }

            adviceText.textContent = advice;
            adviceResult.classList.remove('hidden');
        });
    </script>
</body>

</html>    